import React, {Component} from 'react'
import Taro from '@tarojs/taro'
// import {inject, observer} from "mobx-react";
import {View, Image, Button} from '@tarojs/components'
import {getUserInfoLoginWX} from "../../service/user";
import {showToast, getStorageSync, setStorageSync, removeStorageSync, PageNavTo, isWX} from '../../utils/common'
import UserAuth from '../../assets/image/user_auth.jpg'
import './index.scss'

type PageStateProps = {
  // store: {
  //   userStore: {
  //     userInfo: any
  //     setUserInfo: (v: {}) => void;
  //   }
  // }
}

type PageDispatchProps = {}

type PageOwnProps = {}

type PageState = {
  userInfoData: undefined
}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface User {
  props: IProps;
}

//
// @inject('store')
// @observer
class User extends Component<IProps, PageState> {
  state: any = {
    userInfoData: undefined
  }

  componentDidMount() {
    this.onLoadPage()
  }

  componentDidShow() {
    this.onLoadPage()
  }


  onLoadPage() {
    Taro.getSetting().then(res => {
      if (res.authSetting['scope.userInfo']) {
        return true;
      } else {
        removeStorageSync('userInfo')
        showToast('获取用户信息失败 请先登录！')
      }
    }).then(res => {
      if (res) {
        let token = getStorageSync('userToken')
        let userInfo = getStorageSync('userInfo')
        let data = Taro.getUserInfo()
        if (userInfo && token) {
          this.setState({
            userInfoData: userInfo
          })
        } else {
          this.wxLoginRequest(data)
        }
      }
    }).catch(err => {
      console.log(err);
    })
  }

  // 登录请求
  wxLoginRequest(userInfo) {
    // const {setUserInfo} = getStorageSync('userInfo')
    Taro.login({
      success: async (res) => {
        console.log(res);
        if (res.code) {
          //发起网络请求
          const params = {
            code: res.code,
            userInfo: JSON.stringify(userInfo)
          }
          const data = await getUserInfoLoginWX(params)
          console.log(data);
          if (data.code !== 1) return showToast('获取用户信息失败')
          setStorageSync('userInfo', data.data)
          setStorageSync('userToken', data.token)
          this.setState({
            userInfoData: data.data
          })
        } else {
          console.log('登录失败！' + res.errMsg)
        }
      }
    })
  }


  // 点击获取授权信息
  handleClickLogin = (res) => {
    if (res.detail) {
      this.wxLoginRequest(res.detail.userInfo)
    }
  }

  // 跳转认证
  handleNavigateToStu = () => {
    const res = getStorageSync('userInfo')
    if (res) {
      PageNavTo('/pages/stu-auth/index')
    } else {
      showToast('请先登录！')
    }
  }

  handleNavigateToMy(){
    PageNavTo('/pages/my/index')
  }

  handleNavigateToHelp(){
    PageNavTo('/pages/help/index')
  }

  // 分享小程序
  onShareAppMessage() {
    return {
      title: "武院社交平台",
      path: '/pages/index/index',  // 自定义的分享路径，点击分享的卡片之后会跳转这里定义的路由
      imageUrl: UserAuth // 图片路径
    };
  }

  handleShowToast() {
    showToast('暂未开发')
  }
  render() {
    const {userInfoData} = this.state
    return (
      <View className='main_user'>
        <View className='user_header'>
          <View className='user_header_back' />
          {
            userInfoData ?
              <View className='user_title'>
                <View className='user_header_name'>{userInfoData.user_name || '马里奥'}</View>
                <View className='user_header_num'>学号： {userInfoData.edu_account || '--'}</View>
              </View>
              :
              <View className='user_title'>
                <View className='user_header_name'>游客用户</View>
                {
                  process.env.TARO_ENV === 'weapp'
                    ?
                    <Button
                      className='login_btn'
                      openType='getUserInfo'
                      onGetUserInfo={this.handleClickLogin}
                    >点击登录认证...</Button>
                    :
                    ''
                }</View>
          }
          <View className='user_auth'>

            <Image className='user_auth_img' src={userInfoData ? userInfoData.user_picture : UserAuth} /> :

          </View>
          <View className='user_auth_back_circle_animation'>
            <View className='_circle_animation' />
            <View className='_circle_animation' />
            <View className='_circle_animation' />
            <View className='_circle_animation' />
          </View>
        </View>

        <View className='user_content'>
          <View className='user_nav'>
            <View className='user_nav_item' onClick={this.handleNavigateToMy}>
              <View className='iconfont icon-huangguan user_nav_item_icon' />
              <View className='user_nav_item_name'>我的主页</View>
            </View>
            {/*<View className='user_nav_item'>*/}
            {/*  <View className='iconfont icon-zhifeiji_fabu user_nav_item_icon' />*/}
            {/*  <View className='user_nav_item_name'>与我相关</View>*/}
            {/*</View>*/}
            <View className='user_nav_item' onClick={this.handleShowToast}>
              <View className='iconfont icon-jihuozhuangtai user_nav_item_icon' />
              <View className='user_nav_item_name'>本周活跃</View>
            </View>
          </View>
          <View className='user_back_change' onClick={this.handleNavigateToStu}>
            <View className='iconfont icon-guanyuwomen user_back_change_icon' />
            <View>个人信息认证</View>
          </View>
          <View className='user_list'>
            {
              isWX() ?
                <Button className='user_list_item' open-type='share' >
                  <View className='iconfont icon-huodongtuiguang user_list_item_img' />
                  推荐给好友
                </Button>
                : ''
            }
            <View className='user_list_item' onClick={this.handleNavigateToHelp}>
              <View className='iconfont  icon-huomiao user_list_item_img' />
              帮助中心
            </View>
            {
              isWX() ?
                <Button className='user_list_item'  open-type='contact'>
                  <View className='iconfont icon-Serviceequipment user_list_item_img' />
                  小程序客服
                </Button>
                : ''
            }

          </View>

        </View>

      </View>
    )
  }
}

export default User
